// page组件
Vue.component('qfPage',{
    props:{
        total:{
            type:Number,
            default:0
        },
        pageSize:{
            type:Number,
            default:2,
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        total: {
            handler(newdata) {
                this.totalPage = Math.ceil(this.total/this.pageSize)
            },
            immediate: true,
        }
    },
    template:`<div class="qf-page">
        <span v-for="num in totalPage" @click="$emit('ckick-page',num)">{{num}}</span>
    </div>`
})

// dialog组件
Vue.component('qfDialog',{
    props:{
        title:{
            type: String,
            default: '默认标题'
        },
        content: String,
        visible:{
            type: Boolean,
            default: false,
        }
    },
    template:`<div class="qf-dialog" v-if="visible">
        <div class="box">
            <div class="header">{{ title }}</div>
            <div class="main">
                {{ content }}
            </div>
            <div class="footer">
                <button @click="$emit('update:visible', false)">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>`
})

// loading2组件
Vue.component('qfLoading2',{
    props:{
        state:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="qf-loading2" v-if="state" @click="$emit('update:state',false)">
        <span>loading2...</span>
    </div>`
})

// loading1组件
Vue.component('qfLoading1',{
    props:{
        state:{
            type:Boolean,
            default:false,
        }
    },
    template:`<div class="qf-loading1" v-if="state">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>`,
})

// 按钮组件
Vue.component('qfButton',{
    props:{
        content: {
            type: String,
            required: true,
        },
        type:{
            type: String,
            default:'primary'
        }
    },
    template:`<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']  ">
        <div class="qf-button__content">
        <span class="qf-button__text">{{content}}</span>
        </div>
    </button>`
})

// 导航栏组件
Vue.component('qfNavBar',{
    props:{
        title:{
            type:String,
            required:true,
        },
        leftArrow:Boolean,
    },
    template:`<div class="qf-nav-bar">
        <span @click="$emit('click-left')">
            {{leftArrow?'<返回':' '}}
        </span>
        <span>{{ title }}</span>
        <span @click="$emit('click-right')">🔍搜索</span>
    </div>`
})


// 表单组件
Vue.component('qfTable',{
    props:{
        state:{
            type:Boolean,
            default:true,
        }
    },
    data(){
        return{
            formData:{
                account:'',
                password:'',
            }
        }
    },
    template:`<fieldset>
        <legend>千峰封装的表单</legend>
        用户名：<input type="text" v-model="formData.account" />
        密码：<input type="password" v-model="formData.password" />
        <button v-if="state" @click="$emit('submit',formData)">提交</button>
    </fieldset>`
})



